<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易安装vue.js</title>
    <script src="../js/lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    公众号：{{name}}
</div>
<script>
    // 1、数据驱动视图
    // 我们通过new Vue()
    // 创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM
    // 元素(id = 'app')，表明这个实例是关联指定的DOM节点。
    let vm = new Vue({
        el:"#app",
        data:{
            name:"web前端教程"
        }
    });
</script>
<div id="box">
    <!--2、使用v-model指令就可以轻松实现数据双向绑定-->
    <input v-model="number">
    <p>数字：{{number}}</p>
</div>
<script>
    let vm1 = new Vue({
        el: "#box",
        data: {
            number: ""
        }
    });
</script>
<div id="card-box">
    <!--3、组件-->
    <card></card>
    <card></card>
    <card></card>
</div>
<script>
    // 注册一个card组件
    Vue.component('card',{
        template:`<div>
            <h2>web前端教程</h2>
            <p>教程描述内容。。。。。。。。。。</p>
            <button>我是按钮</button>
            </div>`
    });
    new Vue({
        el:"#card-box"
    })
</script>
</body>
</html>